<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>

    /*下面的配置会覆盖前面的配置-配置规则从小到大*/

    /*规则1*/
    @media (min-width: 320px) {
      html {
        background: red;
      }
    }

    /*规则2*/
    @media (min-width: 800px) {
      html {
        background: green;
      }
    }

    /*规则3*/
    @media (min-width: 1024px) {
      html{
        background: blue;
      }
    }
  </style>
</head>
<body>
</body>
</html>
